@page "/colors"
@inherits BasePage

<PageTitle>颜色</PageTitle>
<div class="mdui-m-y-5">
    <MduiText Typo="@Typo.display1" TextColor="@Colors.Theme.Primary">颜色</MduiText>
    <p>MDUI 内置了 Material Design 的 19 组颜色，其中 16 组有强调色，所有颜色（包括背景色中的文本颜色、文本不透明度）均与 Material Design 官方文档保持一致。</p>
</div>

<PageContent>
    <PageContentItem Title="使用方法" OnClick="@(_=>ScrollToElementById("usage"))" />
    <PageContentItem Title="颜色参考表" OnClick="@(_=>ScrollToElementById("colortable"))" />
    <PageContentItem Title="主题颜色" OnClick="@(_=>ScrollToElementById("themecolor"))" />
</PageContent>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="usage">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">使用方法</MduiText>
    </h2>

    <MduiText Typo="@Typo.subheading"><b>1. 组件参数</b></MduiText>
    <MduiText UseMduiTypo>
        <ul>
            <li>设置组件参数<code>Color</code>可以改变组件的背景颜色。</li>
            <li>设置组件参数<code>TextColor</code>可以改变组件的文本颜色。</li>
        </ul>
    </MduiText>

    <MduiText Typo="@Typo.subheading"><b>2. css类名</b></MduiText>
    <MduiText UseMduiTypo>
        <ul>
            <li>设置组件/元素类名<code>.mdui-color-[color]-[degree]</code>可以改变组件/元素的背景颜色。</li>
            <li>设置组件/元素类名<code>.mdui-text-color-[color]-[degree]</code>可以改变组件/元素的文本颜色。</li>
        </ul>
    </MduiText>

    <MduiText Typo="@Typo.subheading" Opacity><em>注：</em></MduiText>
    <MduiText Typo="@Typo.caption" UseMduiTypo Opacity>
        <ul>
            <li><em>如果仅单独设置了背景颜色的，该组件/元素中的文本颜色和文本不透明度会根据背景颜色自动设定。</em></li>
            <li><em>组件参数的颜色值及css类名见<a href="javascript:;"
                        @onclick="@(_=>ScrollToElementById("colortable"))"> 颜色参考表 </a>和<a href="javascript:;"
                        @onclick="@(_=>ScrollToElementById("themecolor"))"> 主题颜色 </a></em></li>
        </ul>
    </MduiText>
</div>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="colortable">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">颜色参考表</MduiText>
    </h2>

    <MduiRow BreakpointXs="@Breakpoint.Xs.xs1" BreakpointSm="@Breakpoint.Sm.sm2" BreakpointMd="@Breakpoint.Md.md3">
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-red color-name">Red</li>
                <li class="mdui-color-red">@nameof(Colors.Red.Primary) (mdui-[color|text-color]-red)</li>
                <li class="mdui-color-red-50">@nameof(Colors.Red.Primary0) (mdui-[color|text-color]-red-50)</li>
                <li class="mdui-color-red-100">@nameof(Colors.Red.Primary1) (mdui-[color|text-color]-red-100)</li>
                <li class="mdui-color-red-200">@nameof(Colors.Red.Primary2) (mdui-[color|text-color]-red-200)</li>
                <li class="mdui-color-red-300">@nameof(Colors.Red.Primary3) (mdui-[color|text-color]-red-300)</li>
                <li class="mdui-color-red-400">@nameof(Colors.Red.Primary4) (mdui-[color|text-color]-red-400)</li>
                <li class="mdui-color-red-500">@nameof(Colors.Red.Primary5) (mdui-[color|text-color]-red-500)</li>
                <li class="mdui-color-red-600">@nameof(Colors.Red.Primary6) (mdui-[color|text-color]-red-600)</li>
                <li class="mdui-color-red-700">@nameof(Colors.Red.Primary7) (mdui-[color|text-color]-red-700)</li>
                <li class="mdui-color-red-800">@nameof(Colors.Red.Primary8) (mdui-[color|text-color]-red-800)</li>
                <li class="mdui-color-red-900">@nameof(Colors.Red.Primary9) (mdui-[color|text-color]-red-900)</li>
                <li class="mdui-color-red-accent">@nameof(Colors.Red.Accent) (mdui-[color|text-color]-red-900)</li>
                <li class="mdui-color-red-a100">@nameof(Colors.Red.Accent1) (mdui-[color|text-color]-red-a100)</li>
                <li class="mdui-color-red-a200">@nameof(Colors.Red.Accent2) (mdui-[color|text-color]-red-a200)</li>
                <li class="mdui-color-red-a400">@nameof(Colors.Red.Accent4) (mdui-[color|text-color]-red-a400)</li>
                <li class="mdui-color-red-a700">@nameof(Colors.Red.Accent7) (mdui-[color|text-color]-red-a700)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-pink color-name">Pink</li>
                <li class="mdui-color-pink">@nameof(Colors.Pink.Primary) (mdui-[color|text-color]-pink)</li>
                <li class="mdui-color-pink-50">@nameof(Colors.Pink.Primary0) (mdui-[color|text-color]-pink-50)</li>
                <li class="mdui-color-pink-100">@nameof(Colors.Pink.Primary1) (mdui-[color|text-color]-pink-100)</li>
                <li class="mdui-color-pink-200">@nameof(Colors.Pink.Primary2) (mdui-[color|text-color]-pink-200)</li>
                <li class="mdui-color-pink-300">@nameof(Colors.Pink.Primary3) (mdui-[color|text-color]-pink-300)</li>
                <li class="mdui-color-pink-400">@nameof(Colors.Pink.Primary4) (mdui-[color|text-color]-pink-400)</li>
                <li class="mdui-color-pink-500">@nameof(Colors.Pink.Primary5) (mdui-[color|text-color]-pink-500)</li>
                <li class="mdui-color-pink-600">@nameof(Colors.Pink.Primary6) (mdui-[color|text-color]-pink-600)</li>
                <li class="mdui-color-pink-700">@nameof(Colors.Pink.Primary7) (mdui-[color|text-color]-pink-700)</li>
                <li class="mdui-color-pink-800">@nameof(Colors.Pink.Primary8) (mdui-[color|text-color]-pink-800)</li>
                <li class="mdui-color-pink-900">@nameof(Colors.Pink.Primary9) (mdui-[color|text-color]-pink-900)</li>
                <li class="mdui-color-pink-accent">@nameof(Colors.Pink.Accent) (mdui-[color|text-color]-pink-accent)</li>
                <li class="mdui-color-pink-a100">@nameof(Colors.Pink.Accent1) (mdui-[color|text-color]-pink-a100)</li>
                <li class="mdui-color-pink-a200">@nameof(Colors.Pink.Accent2) (mdui-[color|text-color]-pink-a200)</li>
                <li class="mdui-color-pink-a400">@nameof(Colors.Pink.Accent4) (mdui-[color|text-color]-pink-a400)</li>
                <li class="mdui-color-pink-a700">@nameof(Colors.Pink.Accent7) (mdui-[color|text-color]-pink-a700)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-purple color-name">Purple</li>
                <li class="mdui-color-purple">@nameof(Colors.Purple.Primary) (mdui-[color|text-color]-purple)</li>
                <li class="mdui-color-purple-50">@nameof(Colors.Purple.Primary0) (mdui-[color|text-color]-purple-50)</li>
                <li class="mdui-color-purple-100">@nameof(Colors.Purple.Primary1) (mdui-[color|text-color]-purple-100)</li>
                <li class="mdui-color-purple-200">@nameof(Colors.Purple.Primary2) (mdui-[color|text-color]-purple-200)</li>
                <li class="mdui-color-purple-300">@nameof(Colors.Purple.Primary3) (mdui-[color|text-color]-purple-300)</li>
                <li class="mdui-color-purple-400">@nameof(Colors.Purple.Primary4) (mdui-[color|text-color]-purple-400)</li>
                <li class="mdui-color-purple-500">@nameof(Colors.Purple.Primary5) (mdui-[color|text-color]-purple-500)</li>
                <li class="mdui-color-purple-600">@nameof(Colors.Purple.Primary6) (mdui-[color|text-color]-purple-600)</li>
                <li class="mdui-color-purple-700">@nameof(Colors.Purple.Primary7) (mdui-[color|text-color]-purple-700)</li>
                <li class="mdui-color-purple-800">@nameof(Colors.Purple.Primary8) (mdui-[color|text-color]-purple-800)</li>
                <li class="mdui-color-purple-900">@nameof(Colors.Purple.Primary9) (mdui-[color|text-color]-purple-900)</li>
                <li class="mdui-color-purple-accent">@nameof(Colors.Purple.Accent) (mdui-[color|text-color]-purple-accent)</li>
                <li class="mdui-color-purple-a100">@nameof(Colors.Purple.Accent1) (mdui-[color|text-color]-purple-a100)</li>
                <li class="mdui-color-purple-a200">@nameof(Colors.Purple.Accent2) (mdui-[color|text-color]-purple-a200)</li>
                <li class="mdui-color-purple-a400">@nameof(Colors.Purple.Accent4) (mdui-[color|text-color]-purple-a400)</li>
                <li class="mdui-color-purple-a700">@nameof(Colors.Purple.Accent7) (mdui-[color|text-color]-purple-a700)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-deep-purple color-name">DeepPurple</li>
                <li class="mdui-color-deep-purple">@nameof(Colors.DeepPurple.Primary) (mdui-[color|text-color]-deep-purple)</li>
                <li class="mdui-color-deep-purple-50">@nameof(Colors.DeepPurple.Primary0) (mdui-[color|text-color]-deep-purple-50)</li>
                <li class="mdui-color-deep-purple-100">@nameof(Colors.DeepPurple.Primary1) (mdui-[color|text-color]-deep-purple-100)</li>
                <li class="mdui-color-deep-purple-200">@nameof(Colors.DeepPurple.Primary2) (mdui-[color|text-color]-deep-purple-200)</li>
                <li class="mdui-color-deep-purple-300">@nameof(Colors.DeepPurple.Primary3) (mdui-[color|text-color]-deep-purple-300)</li>
                <li class="mdui-color-deep-purple-400">@nameof(Colors.DeepPurple.Primary4) (mdui-[color|text-color]-deep-purple-400)</li>
                <li class="mdui-color-deep-purple-500">@nameof(Colors.DeepPurple.Primary5) (mdui-[color|text-color]-deep-purple-500)</li>
                <li class="mdui-color-deep-purple-600">@nameof(Colors.DeepPurple.Primary6) (mdui-[color|text-color]-deep-purple-600)</li>
                <li class="mdui-color-deep-purple-700">@nameof(Colors.DeepPurple.Primary7) (mdui-[color|text-color]-deep-purple-700)</li>
                <li class="mdui-color-deep-purple-800">@nameof(Colors.DeepPurple.Primary8) (mdui-[color|text-color]-deep-purple-800)</li>
                <li class="mdui-color-deep-purple-900">@nameof(Colors.DeepPurple.Primary9) (mdui-[color|text-color]-deep-purple-900)</li>
                <li class="mdui-color-deep-purple-accent">@nameof(Colors.DeepPurple.Accent) (mdui-[color|text-color]-deep-purple-accent)</li>
                <li class="mdui-color-deep-purple-a100">@nameof(Colors.DeepPurple.Accent1) (mdui-[color|text-color]-deep-purple-a100)</li>
                <li class="mdui-color-deep-purple-a200">@nameof(Colors.DeepPurple.Accent2) (mdui-[color|text-color]-deep-purple-a200)</li>
                <li class="mdui-color-deep-purple-a400">@nameof(Colors.DeepPurple.Accent4) (mdui-[color|text-color]-deep-purple-a400)</li>
                <li class="mdui-color-deep-purple-a700">@nameof(Colors.DeepPurple.Accent7) (mdui-[color|text-color]-deep-purple-a700)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-indigo color-name">Indigo</li>
                <li class="mdui-color-indigo">@nameof(Colors.Indigo.Primary) (mdui-[color|text-color]-indigo)</li>
                <li class="mdui-color-indigo-50">@nameof(Colors.Indigo.Primary0) (mdui-[color|text-color]-indigo-50)</li>
                <li class="mdui-color-indigo-100">@nameof(Colors.Indigo.Primary1) (mdui-[color|text-color]-indigo-100)</li>
                <li class="mdui-color-indigo-200">@nameof(Colors.Indigo.Primary2) (mdui-[color|text-color]-indigo-200)</li>
                <li class="mdui-color-indigo-300">@nameof(Colors.Indigo.Primary3) (mdui-[color|text-color]-indigo-300)</li>
                <li class="mdui-color-indigo-400">@nameof(Colors.Indigo.Primary4) (mdui-[color|text-color]-indigo-400)</li>
                <li class="mdui-color-indigo-500">@nameof(Colors.Indigo.Primary5) (mdui-[color|text-color]-indigo-500)</li>
                <li class="mdui-color-indigo-600">@nameof(Colors.Indigo.Primary6) (mdui-[color|text-color]-indigo-600)</li>
                <li class="mdui-color-indigo-700">@nameof(Colors.Indigo.Primary7) (mdui-[color|text-color]-indigo-700)</li>
                <li class="mdui-color-indigo-800">@nameof(Colors.Indigo.Primary8) (mdui-[color|text-color]-indigo-800)</li>
                <li class="mdui-color-indigo-900">@nameof(Colors.Indigo.Primary9) (mdui-[color|text-color]-indigo-900)</li>
                <li class="mdui-color-indigo-accent">@nameof(Colors.Indigo.Accent) (mdui-[color|text-color]-indigo-accent)</li>
                <li class="mdui-color-indigo-a100">@nameof(Colors.Indigo.Accent1) (mdui-[color|text-color]-indigo-a100)</li>
                <li class="mdui-color-indigo-a200">@nameof(Colors.Indigo.Accent2) (mdui-[color|text-color]-indigo-a200)</li>
                <li class="mdui-color-indigo-a400">@nameof(Colors.Indigo.Accent4) (mdui-[color|text-color]-indigo-a400)</li>
                <li class="mdui-color-indigo-a700">@nameof(Colors.Indigo.Accent7) (mdui-[color|text-color]-indigo-a700)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-blue color-name">Blue</li>
                <li class="mdui-color-blue">@nameof(Colors.Blue.Primary) (mdui-[color|text-color]-blue)</li>
                <li class="mdui-color-blue-50">@nameof(Colors.Blue.Primary0) (mdui-[color|text-color]-blue-50)</li>
                <li class="mdui-color-blue-100">@nameof(Colors.Blue.Primary1) (mdui-[color|text-color]-blue-100)</li>
                <li class="mdui-color-blue-200">@nameof(Colors.Blue.Primary2) (mdui-[color|text-color]-blue-200)</li>
                <li class="mdui-color-blue-300">@nameof(Colors.Blue.Primary3) (mdui-[color|text-color]-blue-300)</li>
                <li class="mdui-color-blue-400">@nameof(Colors.Blue.Primary4) (mdui-[color|text-color]-blue-400)</li>
                <li class="mdui-color-blue-500">@nameof(Colors.Blue.Primary5) (mdui-[color|text-color]-blue-500)</li>
                <li class="mdui-color-blue-600">@nameof(Colors.Blue.Primary6) (mdui-[color|text-color]-blue-600)</li>
                <li class="mdui-color-blue-700">@nameof(Colors.Blue.Primary7) (mdui-[color|text-color]-blue-700)</li>
                <li class="mdui-color-blue-800">@nameof(Colors.Blue.Primary8) (mdui-[color|text-color]-blue-800)</li>
                <li class="mdui-color-blue-900">@nameof(Colors.Blue.Primary9) (mdui-[color|text-color]-blue-900)</li>
                <li class="mdui-color-blue-accent">@nameof(Colors.Blue.Accent) (mdui-[color|text-color]-blue-accent)</li>
                <li class="mdui-color-blue-a100">@nameof(Colors.Blue.Accent1) (mdui-[color|text-color]-blue-a100)</li>
                <li class="mdui-color-blue-a200">@nameof(Colors.Blue.Accent2) (mdui-[color|text-color]-blue-a200)</li>
                <li class="mdui-color-blue-a400">@nameof(Colors.Blue.Accent4) (mdui-[color|text-color]-blue-a400)</li>
                <li class="mdui-color-blue-a700">@nameof(Colors.Blue.Accent7) (mdui-[color|text-color]-blue-a700)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-light-blue color-name">LightBlue</li>
                <li class="mdui-color-light-blue">@nameof(Colors.LightBlue.Primary) (mdui-[color|text-color]-light-blue)</li>
                <li class="mdui-color-light-blue-50">@nameof(Colors.LightBlue.Primary0) (mdui-[color|text-color]-light-blue-50)</li>
                <li class="mdui-color-light-blue-100">@nameof(Colors.LightBlue.Primary1) (mdui-[color|text-color]-light-blue-100)</li>
                <li class="mdui-color-light-blue-200">@nameof(Colors.LightBlue.Primary2) (mdui-[color|text-color]-light-blue-200)</li>
                <li class="mdui-color-light-blue-300">@nameof(Colors.LightBlue.Primary3) (mdui-[color|text-color]-light-blue-300)</li>
                <li class="mdui-color-light-blue-400">@nameof(Colors.LightBlue.Primary4) (mdui-[color|text-color]-light-blue-400)</li>
                <li class="mdui-color-light-blue-500">@nameof(Colors.LightBlue.Primary5) (mdui-[color|text-color]-light-blue-500)</li>
                <li class="mdui-color-light-blue-600">@nameof(Colors.LightBlue.Primary6) (mdui-[color|text-color]-light-blue-600)</li>
                <li class="mdui-color-light-blue-700">@nameof(Colors.LightBlue.Primary7) (mdui-[color|text-color]-light-blue-700)</li>
                <li class="mdui-color-light-blue-800">@nameof(Colors.LightBlue.Primary8) (mdui-[color|text-color]-light-blue-800)</li>
                <li class="mdui-color-light-blue-900">@nameof(Colors.LightBlue.Primary9) (mdui-[color|text-color]-light-blue-900)</li>
                <li class="mdui-color-light-blue-accent">@nameof(Colors.LightBlue.Accent) (mdui-[color|text-color]-light-blue-accent)</li>
                <li class="mdui-color-light-blue-a100">@nameof(Colors.LightBlue.Accent1) (mdui-[color|text-color]-light-blue-a100)</li>
                <li class="mdui-color-light-blue-a200">@nameof(Colors.LightBlue.Accent2) (mdui-[color|text-color]-light-blue-a200)</li>
                <li class="mdui-color-light-blue-a400">@nameof(Colors.LightBlue.Accent4) (mdui-[color|text-color]-light-blue-a400)</li>
                <li class="mdui-color-light-blue-a700">@nameof(Colors.LightBlue.Accent7) (mdui-[color|text-color]-light-blue-a700)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-cyan color-name">Cyan</li>
                <li class="mdui-color-cyan">@nameof(Colors.Cyan.Primary) (mdui-[color|text-color]-cyan)</li>
                <li class="mdui-color-cyan-50">@nameof(Colors.Cyan.Primary0) (mdui-[color|text-color]-cyan-50)</li>
                <li class="mdui-color-cyan-100">@nameof(Colors.Cyan.Primary1) (mdui-[color|text-color]-cyan-100)</li>
                <li class="mdui-color-cyan-200">@nameof(Colors.Cyan.Primary2) (mdui-[color|text-color]-cyan-200)</li>
                <li class="mdui-color-cyan-300">@nameof(Colors.Cyan.Primary3) (mdui-[color|text-color]-cyan-300)</li>
                <li class="mdui-color-cyan-400">@nameof(Colors.Cyan.Primary4) (mdui-[color|text-color]-cyan-400)</li>
                <li class="mdui-color-cyan-500">@nameof(Colors.Cyan.Primary5) (mdui-[color|text-color]-cyan-500)</li>
                <li class="mdui-color-cyan-600">@nameof(Colors.Cyan.Primary6) (mdui-[color|text-color]-cyan-600)</li>
                <li class="mdui-color-cyan-700">@nameof(Colors.Cyan.Primary7) (mdui-[color|text-color]-cyan-700)</li>
                <li class="mdui-color-cyan-800">@nameof(Colors.Cyan.Primary8) (mdui-[color|text-color]-cyan-800)</li>
                <li class="mdui-color-cyan-900">@nameof(Colors.Cyan.Primary9) (mdui-[color|text-color]-cyan-900)</li>
                <li class="mdui-color-cyan-accent">@nameof(Colors.Cyan.Accent) (mdui-[color|text-color]-cyan-accent)</li>
                <li class="mdui-color-cyan-a100">@nameof(Colors.Cyan.Accent1) (mdui-[color|text-color]-cyan-a100)</li>
                <li class="mdui-color-cyan-a200">@nameof(Colors.Cyan.Accent2) (mdui-[color|text-color]-cyan-a200)</li>
                <li class="mdui-color-cyan-a400">@nameof(Colors.Cyan.Accent4) (mdui-[color|text-color]-cyan-a400)</li>
                <li class="mdui-color-cyan-a700">@nameof(Colors.Cyan.Accent7) (mdui-[color|text-color]-cyan-a700)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-teal color-name">Teal</li>
                <li class="mdui-color-teal">@nameof(Colors.Teal.Primary) (mdui-[color|text-color]-teal)</li>
                <li class="mdui-color-teal-50">@nameof(Colors.Teal.Primary0) (mdui-[color|text-color]-teal-50)</li>
                <li class="mdui-color-teal-100">@nameof(Colors.Teal.Primary1) (mdui-[color|text-color]-teal-100)</li>
                <li class="mdui-color-teal-200">@nameof(Colors.Teal.Primary2) (mdui-[color|text-color]-teal-200)</li>
                <li class="mdui-color-teal-300">@nameof(Colors.Teal.Primary3) (mdui-[color|text-color]-teal-300)</li>
                <li class="mdui-color-teal-400">@nameof(Colors.Teal.Primary4) (mdui-[color|text-color]-teal-400)</li>
                <li class="mdui-color-teal-500">@nameof(Colors.Teal.Primary5) (mdui-[color|text-color]-teal-500)</li>
                <li class="mdui-color-teal-600">@nameof(Colors.Teal.Primary6) (mdui-[color|text-color]-teal-600)</li>
                <li class="mdui-color-teal-700">@nameof(Colors.Teal.Primary7) (mdui-[color|text-color]-teal-700)</li>
                <li class="mdui-color-teal-800">@nameof(Colors.Teal.Primary8) (mdui-[color|text-color]-teal-800)</li>
                <li class="mdui-color-teal-900">@nameof(Colors.Teal.Primary9) (mdui-[color|text-color]-teal-900)</li>
                <li class="mdui-color-teal-accent">@nameof(Colors.Teal.Accent) (mdui-[color|text-color]-teal-accent)</li>
                <li class="mdui-color-teal-a100">@nameof(Colors.Teal.Accent1) (mdui-[color|text-color]-teal-a100)</li>
                <li class="mdui-color-teal-a200">@nameof(Colors.Teal.Accent2) (mdui-[color|text-color]-teal-a200)</li>
                <li class="mdui-color-teal-a400">@nameof(Colors.Teal.Accent4) (mdui-[color|text-color]-teal-a400)</li>
                <li class="mdui-color-teal-a700">@nameof(Colors.Teal.Accent7) (mdui-[color|text-color]-teal-a700)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-green color-name">Green</li>
                <li class="mdui-color-green">@nameof(Colors.Green.Primary) (mdui-[color|text-color]-green)</li>
                <li class="mdui-color-green-50">@nameof(Colors.Green.Primary0) (mdui-[color|text-color]-green-50)</li>
                <li class="mdui-color-green-100">@nameof(Colors.Green.Primary1) (mdui-[color|text-color]-green-100)</li>
                <li class="mdui-color-green-200">@nameof(Colors.Green.Primary2) (mdui-[color|text-color]-green-200)</li>
                <li class="mdui-color-green-300">@nameof(Colors.Green.Primary3) (mdui-[color|text-color]-green-300)</li>
                <li class="mdui-color-green-400">@nameof(Colors.Green.Primary4) (mdui-[color|text-color]-green-400)</li>
                <li class="mdui-color-green-500">@nameof(Colors.Green.Primary5) (mdui-[color|text-color]-green-500)</li>
                <li class="mdui-color-green-600">@nameof(Colors.Green.Primary6) (mdui-[color|text-color]-green-600)</li>
                <li class="mdui-color-green-700">@nameof(Colors.Green.Primary7) (mdui-[color|text-color]-green-700)</li>
                <li class="mdui-color-green-800">@nameof(Colors.Green.Primary8) (mdui-[color|text-color]-green-800)</li>
                <li class="mdui-color-green-900">@nameof(Colors.Green.Primary9) (mdui-[color|text-color]-green-900)</li>
                <li class="mdui-color-green-accent">@nameof(Colors.Green.Accent) (mdui-[color|text-color]-green-accent)</li>
                <li class="mdui-color-green-a100">@nameof(Colors.Green.Accent1) (mdui-[color|text-color]-green-a100)</li>
                <li class="mdui-color-green-a200">@nameof(Colors.Green.Accent2) (mdui-[color|text-color]-green-a200)</li>
                <li class="mdui-color-green-a400">@nameof(Colors.Green.Accent4) (mdui-[color|text-color]-green-a400)</li>
                <li class="mdui-color-green-a700">@nameof(Colors.Green.Accent7) (mdui-[color|text-color]-green-a700)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-light-green color-name">LightGreen</li>
                <li class="mdui-color-light-green">@nameof(Colors.LightGreen.Primary) (mdui-[color|text-color]-light-green)</li>
                <li class="mdui-color-light-green-50">@nameof(Colors.LightGreen.Primary0) (mdui-[color|text-color]-light-green-50)</li>
                <li class="mdui-color-light-green-100">@nameof(Colors.LightGreen.Primary1) (mdui-[color|text-color]-light-green-100)</li>
                <li class="mdui-color-light-green-200">@nameof(Colors.LightGreen.Primary2) (mdui-[color|text-color]-light-green-200)</li>
                <li class="mdui-color-light-green-300">@nameof(Colors.LightGreen.Primary3) (mdui-[color|text-color]-light-green-300)</li>
                <li class="mdui-color-light-green-400">@nameof(Colors.LightGreen.Primary4) (mdui-[color|text-color]-light-green-400)</li>
                <li class="mdui-color-light-green-500">@nameof(Colors.LightGreen.Primary5) (mdui-[color|text-color]-light-green-500)</li>
                <li class="mdui-color-light-green-600">@nameof(Colors.LightGreen.Primary6) (mdui-[color|text-color]-light-green-600)</li>
                <li class="mdui-color-light-green-700">@nameof(Colors.LightGreen.Primary7) (mdui-[color|text-color]-light-green-700)</li>
                <li class="mdui-color-light-green-800">@nameof(Colors.LightGreen.Primary8) (mdui-[color|text-color]-light-green-800)</li>
                <li class="mdui-color-light-green-900">@nameof(Colors.LightGreen.Primary9) (mdui-[color|text-color]-light-green-900)</li>
                <li class="mdui-color-light-green-accent">@nameof(Colors.LightGreen.Accent) (mdui-[color|text-color]-light-green-accent)</li>
                <li class="mdui-color-light-green-a100">@nameof(Colors.LightGreen.Accent1) (mdui-[color|text-color]-light-green-a100)</li>
                <li class="mdui-color-light-green-a200">@nameof(Colors.LightGreen.Accent2) (mdui-[color|text-color]-light-green-a200)</li>
                <li class="mdui-color-light-green-a400">@nameof(Colors.LightGreen.Accent4) (mdui-[color|text-color]-light-green-a400)</li>
                <li class="mdui-color-light-green-a700">@nameof(Colors.LightGreen.Accent7) (mdui-[color|text-color]-light-green-a700)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-lime color-name">Lime</li>
                <li class="mdui-color-lime">@nameof(Colors.Lime.Primary) (mdui-[color|text-color]-lime)</li>
                <li class="mdui-color-lime-50">@nameof(Colors.Lime.Primary0) (mdui-[color|text-color]-lime-50)</li>
                <li class="mdui-color-lime-100">@nameof(Colors.Lime.Primary1) (mdui-[color|text-color]-lime-100)</li>
                <li class="mdui-color-lime-200">@nameof(Colors.Lime.Primary2) (mdui-[color|text-color]-lime-200)</li>
                <li class="mdui-color-lime-300">@nameof(Colors.Lime.Primary3) (mdui-[color|text-color]-lime-300)</li>
                <li class="mdui-color-lime-400">@nameof(Colors.Lime.Primary4) (mdui-[color|text-color]-lime-400)</li>
                <li class="mdui-color-lime-500">@nameof(Colors.Lime.Primary5) (mdui-[color|text-color]-lime-500)</li>
                <li class="mdui-color-lime-600">@nameof(Colors.Lime.Primary6) (mdui-[color|text-color]-lime-600)</li>
                <li class="mdui-color-lime-700">@nameof(Colors.Lime.Primary7) (mdui-[color|text-color]-lime-700)</li>
                <li class="mdui-color-lime-800">@nameof(Colors.Lime.Primary8) (mdui-[color|text-color]-lime-800)</li>
                <li class="mdui-color-lime-900">@nameof(Colors.Lime.Primary9) (mdui-[color|text-color]-lime-900)</li>
                <li class="mdui-color-lime-accent">@nameof(Colors.Lime.Accent) (mdui-[color|text-color]-lime-accent)</li>
                <li class="mdui-color-lime-a100">@nameof(Colors.Lime.Accent1) (mdui-[color|text-color]-lime-a100)</li>
                <li class="mdui-color-lime-a200">@nameof(Colors.Lime.Accent2) (mdui-[color|text-color]-lime-a200)</li>
                <li class="mdui-color-lime-a400">@nameof(Colors.Lime.Accent4) (mdui-[color|text-color]-lime-a400)</li>
                <li class="mdui-color-lime-a700">@nameof(Colors.Lime.Accent7) (mdui-[color|text-color]-lime-a700)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-yellow color-name">Yellow</li>
                <li class="mdui-color-yellow">@nameof(Colors.Yellow.Primary) (mdui-[color|text-color]-yellow)</li>
                <li class="mdui-color-yellow-50">@nameof(Colors.Yellow.Primary0) (mdui-[color|text-color]-yellow-50)</li>
                <li class="mdui-color-yellow-100">@nameof(Colors.Yellow.Primary1) (mdui-[color|text-color]-yellow-100)</li>
                <li class="mdui-color-yellow-200">@nameof(Colors.Yellow.Primary2) (mdui-[color|text-color]-yellow-200)</li>
                <li class="mdui-color-yellow-300">@nameof(Colors.Yellow.Primary3) (mdui-[color|text-color]-yellow-300)</li>
                <li class="mdui-color-yellow-400">@nameof(Colors.Yellow.Primary4) (mdui-[color|text-color]-yellow-400)</li>
                <li class="mdui-color-yellow-500">@nameof(Colors.Yellow.Primary5) (mdui-[color|text-color]-yellow-500)</li>
                <li class="mdui-color-yellow-600">@nameof(Colors.Yellow.Primary6) (mdui-[color|text-color]-yellow-600)</li>
                <li class="mdui-color-yellow-700">@nameof(Colors.Yellow.Primary7) (mdui-[color|text-color]-yellow-700)</li>
                <li class="mdui-color-yellow-800">@nameof(Colors.Yellow.Primary8) (mdui-[color|text-color]-yellow-800)</li>
                <li class="mdui-color-yellow-900">@nameof(Colors.Yellow.Primary9) (mdui-[color|text-color]-yellow-900)</li>
                <li class="mdui-color-yellow-accent">@nameof(Colors.Yellow.Accent) (mdui-[color|text-color]-yellow-accent)</li>
                <li class="mdui-color-yellow-a100">@nameof(Colors.Yellow.Accent1) (mdui-[color|text-color]-yellow-a100)</li>
                <li class="mdui-color-yellow-a200">@nameof(Colors.Yellow.Accent2) (mdui-[color|text-color]-yellow-a200)</li>
                <li class="mdui-color-yellow-a400">@nameof(Colors.Yellow.Accent4) (mdui-[color|text-color]-yellow-a400)</li>
                <li class="mdui-color-yellow-a700">@nameof(Colors.Yellow.Accent7) (mdui-[color|text-color]-yellow-a700)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-amber color-name">Amber</li>
                <li class="mdui-color-amber">@nameof(Colors.Amber.Primary) (mdui-[color|text-color]-amber)</li>
                <li class="mdui-color-amber-50">@nameof(Colors.Amber.Primary0) (mdui-[color|text-color]-amber-50)</li>
                <li class="mdui-color-amber-100">@nameof(Colors.Amber.Primary1) (mdui-[color|text-color]-amber-100)</li>
                <li class="mdui-color-amber-200">@nameof(Colors.Amber.Primary2) (mdui-[color|text-color]-amber-200)</li>
                <li class="mdui-color-amber-300">@nameof(Colors.Amber.Primary3) (mdui-[color|text-color]-amber-300)</li>
                <li class="mdui-color-amber-400">@nameof(Colors.Amber.Primary4) (mdui-[color|text-color]-amber-400)</li>
                <li class="mdui-color-amber-500">@nameof(Colors.Amber.Primary5) (mdui-[color|text-color]-amber-500)</li>
                <li class="mdui-color-amber-600">@nameof(Colors.Amber.Primary6) (mdui-[color|text-color]-amber-600)</li>
                <li class="mdui-color-amber-700">@nameof(Colors.Amber.Primary7) (mdui-[color|text-color]-amber-700)</li>
                <li class="mdui-color-amber-800">@nameof(Colors.Amber.Primary8) (mdui-[color|text-color]-amber-800)</li>
                <li class="mdui-color-amber-900">@nameof(Colors.Amber.Primary9) (mdui-[color|text-color]-amber-900)</li>
                <li class="mdui-color-amber-accent">@nameof(Colors.Amber.Accent) (mdui-[color|text-color]-amber-accent)</li>
                <li class="mdui-color-amber-a100">@nameof(Colors.Amber.Accent1) (mdui-[color|text-color]-amber-a100)</li>
                <li class="mdui-color-amber-a200">@nameof(Colors.Amber.Accent2) (mdui-[color|text-color]-amber-a200)</li>
                <li class="mdui-color-amber-a400">@nameof(Colors.Amber.Accent4) (mdui-[color|text-color]-amber-a400)</li>
                <li class="mdui-color-amber-a700">@nameof(Colors.Amber.Accent7) (mdui-[color|text-color]-amber-a700)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-orange color-name">Orange</li>
                <li class="mdui-color-orange">@nameof(Colors.Orange.Primary) (mdui-[color|text-color]-orange)</li>
                <li class="mdui-color-orange-50">@nameof(Colors.Orange.Primary0) (mdui-[color|text-color]-orange-50)</li>
                <li class="mdui-color-orange-100">@nameof(Colors.Orange.Primary1) (mdui-[color|text-color]-orange-100)</li>
                <li class="mdui-color-orange-200">@nameof(Colors.Orange.Primary2) (mdui-[color|text-color]-orange-200)</li>
                <li class="mdui-color-orange-300">@nameof(Colors.Orange.Primary3) (mdui-[color|text-color]-orange-300)</li>
                <li class="mdui-color-orange-400">@nameof(Colors.Orange.Primary4) (mdui-[color|text-color]-orange-400)</li>
                <li class="mdui-color-orange-500">@nameof(Colors.Orange.Primary5) (mdui-[color|text-color]-orange-500)</li>
                <li class="mdui-color-orange-600">@nameof(Colors.Orange.Primary6) (mdui-[color|text-color]-orange-600)</li>
                <li class="mdui-color-orange-700">@nameof(Colors.Orange.Primary7) (mdui-[color|text-color]-orange-700)</li>
                <li class="mdui-color-orange-800">@nameof(Colors.Orange.Primary8) (mdui-[color|text-color]-orange-800)</li>
                <li class="mdui-color-orange-900">@nameof(Colors.Orange.Primary9) (mdui-[color|text-color]-orange-900)</li>
                <li class="mdui-color-orange-accent">@nameof(Colors.Orange.Accent) (mdui-[color|text-color]-orange-accent)</li>
                <li class="mdui-color-orange-a100">@nameof(Colors.Orange.Accent1) (mdui-[color|text-color]-orange-a100)</li>
                <li class="mdui-color-orange-a200">@nameof(Colors.Orange.Accent2) (mdui-[color|text-color]-orange-a200)</li>
                <li class="mdui-color-orange-a400">@nameof(Colors.Orange.Accent4) (mdui-[color|text-color]-orange-a400)</li>
                <li class="mdui-color-orange-a700">@nameof(Colors.Orange.Accent7) (mdui-[color|text-color]-orange-a700)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-deep-orange color-name">DeepOrange</li>
                <li class="mdui-color-deep-orange">@nameof(Colors.DeepOrange.Primary) (mdui-[color|text-color]-deep-orange)</li>
                <li class="mdui-color-deep-orange-50">@nameof(Colors.DeepOrange.Primary0) (mdui-[color|text-color]-deep-orange-50)</li>
                <li class="mdui-color-deep-orange-100">@nameof(Colors.DeepOrange.Primary1) (mdui-[color|text-color]-deep-orange-100)</li>
                <li class="mdui-color-deep-orange-200">@nameof(Colors.DeepOrange.Primary2) (mdui-[color|text-color]-deep-orange-200)</li>
                <li class="mdui-color-deep-orange-300">@nameof(Colors.DeepOrange.Primary3) (mdui-[color|text-color]-deep-orange-300)</li>
                <li class="mdui-color-deep-orange-400">@nameof(Colors.DeepOrange.Primary4) (mdui-[color|text-color]-deep-orange-400)</li>
                <li class="mdui-color-deep-orange-500">@nameof(Colors.DeepOrange.Primary5) (mdui-[color|text-color]-deep-orange-500)</li>
                <li class="mdui-color-deep-orange-600">@nameof(Colors.DeepOrange.Primary6) (mdui-[color|text-color]-deep-orange-600)</li>
                <li class="mdui-color-deep-orange-700">@nameof(Colors.DeepOrange.Primary7) (mdui-[color|text-color]-deep-orange-700)</li>
                <li class="mdui-color-deep-orange-800">@nameof(Colors.DeepOrange.Primary8) (mdui-[color|text-color]-deep-orange-800)</li>
                <li class="mdui-color-deep-orange-900">@nameof(Colors.DeepOrange.Primary9) (mdui-[color|text-color]-deep-orange-900)</li>
                <li class="mdui-color-deep-orange-accent">@nameof(Colors.DeepOrange.Accent) (mdui-[color|text-color]-deep-orange-accent)</li>
                <li class="mdui-color-deep-orange-a100">@nameof(Colors.DeepOrange.Accent1) (mdui-[color|text-color]-deep-orange-a100)</li>
                <li class="mdui-color-deep-orange-a200">@nameof(Colors.DeepOrange.Accent2) (mdui-[color|text-color]-deep-orange-a200)</li>
                <li class="mdui-color-deep-orange-a400">@nameof(Colors.DeepOrange.Accent4) (mdui-[color|text-color]-deep-orange-a400)</li>
                <li class="mdui-color-deep-orange-a700">@nameof(Colors.DeepOrange.Accent7) (mdui-[color|text-color]-deep-orange-a700)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-brown color-name">Brown</li>
                <li class="mdui-color-brown">@nameof(Colors.Brown.Primary) (mdui-[color|text-color]-brown)</li>
                <li class="mdui-color-brown-50">@nameof(Colors.Brown.Primary0) (mdui-[color|text-color]-brown-50)</li>
                <li class="mdui-color-brown-100">@nameof(Colors.Brown.Primary1) (mdui-[color|text-color]-brown-100)</li>
                <li class="mdui-color-brown-200">@nameof(Colors.Brown.Primary2) (mdui-[color|text-color]-brown-200)</li>
                <li class="mdui-color-brown-300">@nameof(Colors.Brown.Primary3) (mdui-[color|text-color]-brown-300)</li>
                <li class="mdui-color-brown-400">@nameof(Colors.Brown.Primary4) (mdui-[color|text-color]-brown-400)</li>
                <li class="mdui-color-brown-500">@nameof(Colors.Brown.Primary5) (mdui-[color|text-color]-brown-500)</li>
                <li class="mdui-color-brown-600">@nameof(Colors.Brown.Primary6) (mdui-[color|text-color]-brown-600)</li>
                <li class="mdui-color-brown-700">@nameof(Colors.Brown.Primary7) (mdui-[color|text-color]-brown-700)</li>
                <li class="mdui-color-brown-800">@nameof(Colors.Brown.Primary8) (mdui-[color|text-color]-brown-800)</li>
                <li class="mdui-color-brown-900">@nameof(Colors.Brown.Primary9) (mdui-[color|text-color]-brown-900)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-grey color-name">Grey</li>
                <li class="mdui-color-grey">@nameof(Colors.Grey.Primary) (mdui-[color|text-color]-grey)</li>
                <li class="mdui-color-grey-50">@nameof(Colors.Grey.Primary0) (mdui-[color|text-color]-grey-50)</li>
                <li class="mdui-color-grey-100">@nameof(Colors.Grey.Primary1) (mdui-[color|text-color]-grey-100)</li>
                <li class="mdui-color-grey-200">@nameof(Colors.Grey.Primary2) (mdui-[color|text-color]-grey-200)</li>
                <li class="mdui-color-grey-300">@nameof(Colors.Grey.Primary3) (mdui-[color|text-color]-grey-300)</li>
                <li class="mdui-color-grey-400">@nameof(Colors.Grey.Primary4) (mdui-[color|text-color]-grey-400)</li>
                <li class="mdui-color-grey-500">@nameof(Colors.Grey.Primary5) (mdui-[color|text-color]-grey-500)</li>
                <li class="mdui-color-grey-600">@nameof(Colors.Grey.Primary6) (mdui-[color|text-color]-grey-600)</li>
                <li class="mdui-color-grey-700">@nameof(Colors.Grey.Primary7) (mdui-[color|text-color]-grey-700)</li>
                <li class="mdui-color-grey-800">@nameof(Colors.Grey.Primary8) (mdui-[color|text-color]-grey-800)</li>
                <li class="mdui-color-grey-900">@nameof(Colors.Grey.Primary9) (mdui-[color|text-color]-grey-900)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-blue-grey color-name">BlueGrey</li>
                <li class="mdui-color-blue-grey">@nameof(Colors.BlueGrey.Primary) (mdui-[color|text-color]-blue-grey)</li>
                <li class="mdui-color-blue-grey-50">@nameof(Colors.BlueGrey.Primary0) (mdui-[color|text-color]-blue-grey-50)</li>
                <li class="mdui-color-blue-grey-100">@nameof(Colors.BlueGrey.Primary1) (mdui-[color|text-color]-blue-grey-100)</li>
                <li class="mdui-color-blue-grey-200">@nameof(Colors.BlueGrey.Primary2) (mdui-[color|text-color]-blue-grey-200)</li>
                <li class="mdui-color-blue-grey-300">@nameof(Colors.BlueGrey.Primary3) (mdui-[color|text-color]-blue-grey-300)</li>
                <li class="mdui-color-blue-grey-400">@nameof(Colors.BlueGrey.Primary4) (mdui-[color|text-color]-blue-grey-400)</li>
                <li class="mdui-color-blue-grey-500">@nameof(Colors.BlueGrey.Primary5) (mdui-[color|text-color]-blue-grey-500)</li>
                <li class="mdui-color-blue-grey-600">@nameof(Colors.BlueGrey.Primary6) (mdui-[color|text-color]-blue-grey-600)</li>
                <li class="mdui-color-blue-grey-700">@nameof(Colors.BlueGrey.Primary7) (mdui-[color|text-color]-blue-grey-700)</li>
                <li class="mdui-color-blue-grey-800">@nameof(Colors.BlueGrey.Primary8) (mdui-[color|text-color]-blue-grey-800)</li>
                <li class="mdui-color-blue-grey-900">@nameof(Colors.BlueGrey.Primary9) (mdui-[color|text-color]-blue-grey-900)</li>
            </ul>
        </MduiCol>
    </MduiRow>
</div>

<MduiDivider Class="mdui-m-y-5" />

<div>
    <h2 id="themecolor">
        <MduiText Typo="@Typo.headline" TextColor="@Colors.Theme.Primary">主题颜色</MduiText>
    </h2>


    <p>你可以点击页面右上角的
        <MduiIcon Name="color_lens" />图标来设置主题颜色，下面的颜色表的主色、强调色、主题色都会随之发生变化。
    </p>
    <MduiRow BreakpointXs="@Breakpoint.Xs.xs1" BreakpointSm="@Breakpoint.Sm.sm2">
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-color-theme color-name">Theme（主题颜色）</li>
                <li class="mdui-color-theme">@nameof(Colors.Theme.Primary) (mdui-[color|text-color]-theme)</li>
                <li class="mdui-color-theme-50">@nameof(Colors.Theme.Primary0) (mdui-[color|text-color]-theme-50)</li>
                <li class="mdui-color-theme-100">@nameof(Colors.Theme.Primary1) (mdui-[color|text-color]-theme-100)</li>
                <li class="mdui-color-theme-200">@nameof(Colors.Theme.Primary2) (mdui-[color|text-color]-theme-200)</li>
                <li class="mdui-color-theme-300">@nameof(Colors.Theme.Primary3) (mdui-[color|text-color]-theme-300)</li>
                <li class="mdui-color-theme-400">@nameof(Colors.Theme.Primary4) (mdui-[color|text-color]-theme-400)</li>
                <li class="mdui-color-theme-500">@nameof(Colors.Theme.Primary5) (mdui-[color|text-color]-theme-500)</li>
                <li class="mdui-color-theme-600">@nameof(Colors.Theme.Primary6) (mdui-[color|text-color]-theme-600)</li>
                <li class="mdui-color-theme-700">@nameof(Colors.Theme.Primary7) (mdui-[color|text-color]-theme-700)</li>
                <li class="mdui-color-theme-800">@nameof(Colors.Theme.Primary8) (mdui-[color|text-color]-theme-800)</li>
                <li class="mdui-color-theme-900">@nameof(Colors.Theme.Primary9) (mdui-[color|text-color]-theme-900)</li>
                <li class="mdui-color-theme-accent">@nameof(Colors.Theme.Accent) (mdui-[color|text-color]-theme-accent)</li>
                <li class="mdui-color-theme-a100">@nameof(Colors.Theme.Accent1) (mdui-[color|text-color]-theme-a100)</li>
                <li class="mdui-color-theme-a200">@nameof(Colors.Theme.Accent2) (mdui-[color|text-color]-theme-a200)</li>
                <li class="mdui-color-theme-a400">@nameof(Colors.Theme.Accent4) (mdui-[color|text-color]-theme-a400)</li>
                <li class="mdui-color-theme-a700">@nameof(Colors.Theme.Accent7) (mdui-[color|text-color]-theme-a700)</li>
            </ul>
        </MduiCol>
        <MduiCol>
            <ul class="color-palette">
                <li class="mdui-text-color-theme-text color-name">Text（文本主题颜色）</li>
                <li class="mdui-text-color-theme-text">@nameof(Colors.TextColors.Theme.Default) (mdui-text-color-theme-text)</li>
                <li class="mdui-text-color-theme-secondary">@nameof(Colors.TextColors.Theme.Secondary) (mdui-text-color-theme-secondary)</li>
                <li class="mdui-text-color-theme-disabled">@nameof(Colors.TextColors.Theme.Disabled) (mdui-text-color-theme-disabled)</li>
                <li class="mdui-text-color-theme-divider">@nameof(Colors.TextColors.Theme.Divider) (mdui-text-color-theme-divider)</li>
                <li class="mdui-text-color-theme-icon">@nameof(Colors.TextColors.Theme.Icon) (mdui-text-color-theme-icon)</li>
                <li class="mdui-text-color-theme-icon-disabled">@nameof(Colors.TextColors.Theme.IconDisabled) (mdui-text-color-theme-icon-disabled)</li>
            </ul>
        </MduiCol>
    </MduiRow>
</div>